webpack 4.x common config

1. install dependencies

webpack basic

npm i webpack weebpack-cli webpack-merge -D

html packing plugin

npm i html-webpack-plugin -D

css packing plugin, It supports On-Demand-Loading of CSS and SourceMaps.

npm i style-loader css-loader postcss-loader scss-loader autoprefixer -D
npm i mini-css-extract-plugin OptimizeCssAssetsPlugin -D
npm i sass-resources-loader node-sass -D

• scss-loader将scss样式转换为css,
• postcss-loader对转好的css样式做一些列处理
• css-loader将处理好的css样式转为字符串，
• style-loader将css-loader打包好的样式字符串，载入html的style标签上。
• miniCssExtractLoader将html里的样式，抽取出来放到link标签引入
• autoprefixer样式智能加后缀

build after clean

npm i clean-webpack-plugin -D

加载图片资源

npm i file-loader url-loader -D

打包体积优化

npm i terser-webpack-plugin optimize-css-assets-webpack-plugin -D

• hash: 每次编译compilation对象的hash,全局一致,跟每次编译有关，跟单个文件无关，不推荐使用
• chunkhash: chunk的hash,chunk中包含的任一模块发生改变，则chunkhash发生变化，推荐使用。
• contenthash: css文件特有的hash值，是根据css文件内容计算出来的，css发生变化则其值发生变化，推荐css导出中使用

分析打包结果

npm i webpack-bundle-analyzer -D

2. webpack.base.config

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const isDev = process.env.NODE_ENV === "development";
const styleLoader = isDev ? "style-loader" : MiniCssExtractPlugin.loader;

module.exports = {
    mode: isDev ? "development" : "production",
    entry: "./src/index.tsx",
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"],
        alias: {
            "@assets": path.resolve(__dirname, "src/assets/"),
            "@components": path.resolve(__dirname, "src/components/")
        }
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                loader: "awesome-typescript-loader"
            },
            {
                test: /\.js$/,
                enforce: "pre",
                loader: "source-map-loader"
            },
            {
                test: /\.css$/,
                use: [
                    styleLoader,
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1
                        }
                    },
                    "postcss-loader"
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    styleLoader,
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 3
                        }
                    },
                    "postcss-loader",
                    "sass-loader",
                    {
                        loader: "sass-resources-loader",
                        options: {
                            resources: [
                                "./src/styles/_variables.scss",
                                "./src/styles/_mixins.scss"
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpe?g|svg|gif)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        limit: 3 * 1024 //3k, 超过3k不被处理为base64
                    }
                }
            },
            {
                test: /\.(eot|woff|woff2|ttf)$/,
                loader: "file-loader",
                query: {
                    name: "assets/[name].[hash].[ext]"
                }
            }
        ]
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html"
        })
    ]
}

3. webpack.development.config

const webpack = require("webpack");

module.exports = {
    devServer: {
        port: 3000,
        hot: true,
        open: "Chrome",
        inline: true, //自动刷新
        historyApiFallback: true,
        overlay: {
            warnings: true,
            errors: true
        },
        proxy: {
            "/api/*": {
                target: "http://localhost:12306",
                changeOrigin: false,
                secure: false
            }
        }
    },
    plugins: [
        new webpack.DefinePlugin({
            "process.env.NODE_ENV": JSON.stringify("development")
        }),
        //开启HMR(热替换功能,替换更新部分,不重载页面！)
        new webpack.HotModuleReplacementPlugin(),
        //显示模块相对路径
        new webpack.NamedModulesPlugin()
    ]
}

4. webpack.production.config

const path = require("path");
const webpack = require("webpack");
const TerserPlugin = require("terser-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: "js/bundle.[chunkhash:8].js",
        chunkFilename: 'js/[name].[id].[chunkhash:8].js'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: "css/[name].[contenthash:8].css",
            chunkFilename: "css/[id].[contenthash:8].css"
        }),
        new OptimizeCssAssetsPlugin(),
        new webpack.DefinePlugin({
            "process.env.NODE_ENV": JSON.stringify("production")
        }),
        new BundleAnalyzerPlugin()
    ],
    optimization: {
        minimizer: [
            new TerserPlugin({
                cache: true,
                parallel: true,
                terserOptions: {
                    unused: true, // 删除无用代码
                    drop_debugger: true,
                    drop_console: true,
                    dead_code: true
                }
            })
        ],
        splitChunks: {
          chunks: 'all'
        }
    }
}